<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新闻列表</title>
    <link rel="stylesheet" href="../static/css/reset.css">
    <link rel="stylesheet" href="../static/plus/eleme.css">
    <link rel="stylesheet" href="../static/css/style_xia.css">
    <style>
        .fade-enter-active, .fade-leave-active {
            transition: all .5s;
            transform: translateY(0);
        }
        .fade-enter, .fade-leave-active {
            opacity: 0;
            transform: translateY(-100px);
        }
    </style>
</head>
<body>
<div id="app" class="car-apply article-list">
    <mt-header title="新闻列表" fixed>
        <mt-button slot="left" icon="back" @click="goBack"></mt-button>
    </mt-header>
    <section class="content">
        <div class="search-box">
            <div class="item small">
                <label class="label" for="">标题</label>
                <input class="text" type="text">
                <button class="btn-small" v-if="!show">查询</button>
            </div>
           <transition name="fade">
               <div v-if="show">
                   <div class="item">
                       <label class="label" for="">来源部门</label>
                       <input class="text" type="text">
                   </div>
                   <div class="item">
                       <label class="label" for="">来源人</label>
                       <input class="text" type="text">
                   </div>
                   <div class="item">
                       <label class="label" for="">发布时间</label>
                       <input type="text" class="text" @click="open('picker1')" v-model="time">
                   </div>
                   <div class="item send-btn">
                       <button class="btn">高级查询</button>
                   </div>
               </div>
           </transition>
            <div class="more" @click="toggle"><img :src="show ? '../static/images/icon/more_up.png': '../static/images/icon/more_down.png'" alt=""></div>
        </div>
        <div class="list">
            <v-new-list :new-list="newList"></v-new-list>
        </div>

        <!--开始时间选择器-->
        <mt-datetime-picker
                ref="picker1"
                type="date"
                :start-date="startDate"
                @confirm="handleConfirmS">
        </mt-datetime-picker>


    </section>
    <v-footer></v-footer>
    <div class="loading" v-show="isShow">
        <mt-spinner :type="0" :size="60"></mt-spinner>
    </div>
</div>
</body>
<script src="../static/plus/vue.js"></script>
<script src="../static/plus/eleme.js"></script>
<script src="../static/js/common.js"></script>
<script>
    window.onload = function () {
        var vm = new Vue({
            el: '#app',
            data:{
                time:null,
                isShow:true,
                startDate:new Date(),
                modelBtns: [
                    {id: 1, name: '保存'},
                    {id: 2, name: '提交'},
                    {id: 3, name: '终止'},
                    {id: 4, name: '查看流程图'},
                    {id: 5, name: '删除'},
                    {id: 6, name: '完成'}
                ],
                isShowBtnModel: false,
                newList:[
                    {
                        id:231,
                        title:"重庆市地理信息中心综合办公平台网址",
                        department:"综合部",
                        author:'管理员',
                        applyTime:'2018-01-29 14:34',
                        publishTime:'2018-02-01 11:57',
                        publisher:'王斌',
                        updateTime:'2018-02-01 12:03'
                    },
                    {
                        id:234,
                        title:"国务院地名普查办到渝中区开展地名普查实地督查和抽验",
                        department:"综合部",
                        author:'管理员',
                        applyTime:'2017-09-28 09:15',
                        publishTime:'2018-01-19 10:17',
                        publisher:'管理员',
                        updateTime:'2018-01-26 18:21'
                    },
                    {
                        id:231,
                        title:"市应急救援地理信息服务队圆满完成2017年洪涝灾害地理信息保障应急演练",
                        department:"",
                        author:'',
                        applyTime:'2017-09-28 09:15',
                        publishTime:'2018-01-19 10:17',
                        publisher:'管理员',
                        updateTime:'2018-01-26 18:21'
                    },
                    {
                        id:231,
                        title:"市地理信息中心再获一项国家专利授权",
                        department:"",
                        author:'',
                        applyTime:'2017-09-28 09:15',
                        publishTime:'2018-01-19 10:17',
                        publisher:'管理员',
                        updateTime:'2018-01-26 18:21'
                    },
                    {
                        id:231,
                        title:"2017年重庆市“测绘质检”“测绘仪器检定”“北斗地基增强GNSS系统”技术培训会圆满落幕",
                        department:"",
                        author:'',
                        applyTime:'2017-09-28 09:15',
                        publishTime:'2018-01-19 10:17',
                        publisher:'管理员',
                        updateTime:'2018-01-26 18:21'
                    }
                ],
                show:false
            },
            methods:{
                handleConfirmS(value) {
                    this.time = getDateCustom(value);
                },
                open(picker) {
                    this.$refs[picker].open();
                },
                goBack() {
                  history.go(-1);
                },
                toggle() {
                    this.show =!this.show;
                },
                getBtnCode(index) {
                    console.log('点击了第' + index + '个按钮');
                }
            },
            created() {

            },
            mounted() {
                setSectionHeight();
                this.isShow = false;
            }
        });

    }
</script>
</html>